import type { ForwardedRef } from 'react';
import { forwardRef, useImperativeHandle, useState } from 'react';
import type { DrawerProps } from 'antd';
import { Drawer } from 'antd';

export interface BasicDrawerRef {
  open: () => void;
  close: () => void;
}

function BasicDrawer(
  props: DrawerProps & {
    children?: React.ReactNode;
  },
  ref: ForwardedRef<BasicDrawerRef>,
) {
  const { children, ...restProps } = props;

  const [visible, setVisible] = useState<boolean>(false);

  useImperativeHandle(ref, () => ({
    open: () => setVisible(true),
    close: () => setVisible(false),
  }));

  return (
    <Drawer
      placement="right"
      size="large"
      bodyStyle={{ padding: 0 }}
      onClose={() => setVisible(false)}
      visible={visible}
      {...restProps}
    >
      {children}
    </Drawer>
  );
}

export default forwardRef(BasicDrawer);
